<template>
  <div>
    <!-- 创建查询条件 -->
    <TopFilter ref="formPanel" :list="topFilterList" :cols="4" :collapse="true" @filterChange="changeHandle"></TopFilter>
    <!-- 创建一个查询table -->
    <FilterTable
      ref="table"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :columns="columns"
      :onColumnsChange="columns => (this.columns = columns)"
      columnsRef="trustDeedVisitScanMainPage"
    >
      <template slot="controls">
        <el-button size="small" type="primary" icon="el-icon-download" :loading="exportLoading" @click="exportData()">导出</el-button>
      </template>
    </FilterTable>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { getTrustDeedVisitScan, searchBrand, searchSeries, searchModel, findAllRepairType, exportTrustDeedVisitScan } from '@/api/customerRepair/visitAnalysis/trustDeedVisitScan';
import { getAllUser } from '@/api/customerRepair/usedCarVisit/resultEntry';
import { exportExcelFile, arrayObjDeWeight } from '@/utils/index';

export default {
  mixins: [dictionary],
  // 组件注册
  // components: {
  //   RtmAlarmDetail,
  //   EditAlarmDetail
  // },
  // 绑定数据定义
  data() {
    this.BaseTable = null;
    return {
      topFilterList: this.createTopFilterList(),
      fetchApi: getTrustDeedVisitScan,
      fetchParams: { xhrAbort: true },
      columns: this.createColumns(),
      type: null,
      exportLoading: false
    };
  },
  created() {},
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.getAllUser();
    this.getBrand();
    this.repairType();
  },

  // 处理方法
  methods: {
    // 关闭页面触发事件
    // 创建查询条件
    createTopFilterList() {
      return [
        {
          type: 'SELECT',
          label: '日期类型',
          style: { minWidth: '200px' },
          fieldName: 'dataType',
          itemList: [
            { value: '1', text: '结算日期' },
            { value: '2', text: '进场日期' },
            { value: '3', text: '完工日期' },
            { value: '4', text: '回访日期' }
          ],
          initialValue: '1'
        },
        {
          type: 'RANGE_DATE',
          label: '日期范围',
          style: { minWidth: '200px' },
          fieldName: 'inputDateS|inputDateE',
          valueFormat: 'yyyy-MM-dd'
        },
        {
          type: 'SELECT',
          label: '品牌',
          fieldName: 'brand',
          placeholder: '请选择品牌',
          itemList: [],
          change: val => {
            this.changePinpSelect(val);
          }
        },
        {
          type: 'SELECT',
          label: '车系',
          fieldName: 'series',
          placeholder: '请选择车系',
          itemList: [],
          change: val => {
            this.changeChexSelect(val);
          }
        },
        {
          type: 'SELECT',
          label: '车型',
          fieldName: 'model',
          placeholder: '请选择车型',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '服务顾问',
          fieldName: 'serviceAdvisor',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '回访人',
          fieldName: 'trancer',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '维修类型',
          fieldName: 'roType',
          itemList: []
        }
      ];
    },
    createColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '维修类型',
          dataIndex: 'REPAIR_TYPE_NAME',
          sorter: true,
          filter: true,
          filterType: 'input',
          hidden: true
        },
        {
          title: '委托单号',
          dataIndex: 'RO_NO',
          sorter: true,
          filter: true,
          filterType: 'input',
          editType: 'select',
          editable: false,
          editItems: []
        },
        {
          title: '底盘号',
          dataIndex: 'VIN',
          sorter: true,
          filter: true,
          filterType: 'input',
          width: 200
        },
        {
          title: '车牌照',
          dataIndex: 'LICENSE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '回访单号',
          dataIndex: 'OWNER_NAME2',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '回访次数',
          dataIndex: 'OWNER_NAME3',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '回访时间',
          dataIndex: 'INPUT_DATE',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
          width: 150
        },
        {
          title: '服务顾问',
          dataIndex: 'SERVICE_ADVISOR',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: [],
          editType: 'select',
          editable: false,
          editItems: []
        },
        {
          title: '合计金额',
          dataIndex: 'BALANCE_AMOUNT',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '回访人',
          dataIndex: 'TRANCER',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: [],
          editType: 'select',
          editable: false,
          editItems: []
        },
        {
          title: '回访状态',
          dataIndex: 'TRACE_STATUS',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: props => {
            return <span>{this.createDictText(props.row.TRACE_STATUS, '8058')}</span>;
          }
        },
        {
          title: '回访状态原因',
          dataIndex: 'DR_CODE',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: props => {
            return <span>{this.createDictText(props.row.DR_CODE, '8084')}</span>;
          }
        },
        {
          title: '回访结果',
          dataIndex: 'OWNER_NAMEl',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '满意度打分',
          dataIndex: 'OWNER_NAMEj',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '需再回访标识',
          dataIndex: 'O',
          sorter: true,
          filter: true,
          filterType: 'input',
          defaultEditable: true,
          editType: 'checkbox',
          editItems: [
            { text: '', trueValue: '10041001' },
            { text: '', falseValue: '10041002' }
          ]
        },
        {
          title: '客户名称',
          dataIndex: 'OWNER_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户电话',
          dataIndex: 'MOBILE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '联系人名称',
          dataIndex: 'DELIVERER',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '联系人电话',
          dataIndex: 'DELIVERER_PHONE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '进场日期',
          dataIndex: 'RO_CREATE_DATE',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
          width: 150
        },
        {
          title: '结算日期',
          dataIndex: 'BALANCE_TIME',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
          width: 150
        },
        {
          title: '完工日期',
          dataIndex: 'COMPLETE_TIME',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
          width: 150
        },
        {
          title: '约定交车开始时间',
          dataIndex: 'END_TIME_SUPPOSED',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
          width: 160
        },
        {
          title: '车系',
          dataIndex: 'SERIES',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车型',
          dataIndex: 'MODEL',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '发动机号',
          dataIndex: 'ENGINE_NO',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '行驶里程',
          dataIndex: 'TOTAL_MILEAGE',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '本公司售车标识',
          dataIndex: 'IS_SELF_COMPANY',
          sorter: true,
          filter: true,
          filterType: 'input',
          defaultEditable: true,
          editType: 'checkbox',
          editItems: [
            { text: '', trueValue: '10041001' },
            { text: '', falseValue: '10041002' }
          ]
        },
        {
          title: '其他建议',
          dataIndex: 'm',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '备注',
          dataIndex: 'REMARK',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    // 品牌
    async getBrand() {
      const res = await searchBrand();
      this.topFilterList.find(item => item.fieldName === 'brand').itemList = res.data.map(x => ({ value: x.brandId, text: x.brandName }));
    },
    // 车系
    async getSeries(brandsid) {
      const res = await searchSeries(brandsid);
      this.topFilterList.find(item => item.fieldName === 'series').itemList = res.data.map(x => ({ value: x.seriesId, text: x.seriesName }));
    },
    // 车型
    async getModel(brandsid, seriessid) {
      const res = await searchModel(brandsid, seriessid);
      this.topFilterList.find(item => item.fieldName === 'model').itemList = res.data.map(x => ({ value: x.modelId, text: x.modelName }));
    },
    // 品牌下拉框改变时
    changePinpSelect(id) {
      this.clearFormItem(this.topFilterList.find(item => item.fieldName === 'series'));
      this.clearFormItem(this.topFilterList.find(item => item.fieldName === 'model'));
      if (!id) return;
      // 获取车系
      this.getSeries(id);
    },
    // 车系下拉框改变时
    changeChexSelect(id) {
      this.clearFormItem(this.topFilterList.find(item => item.fieldName === 'model'));
      if (!id) return;
      // 获取车型
      this.getModel(this.topFilterList.find(item => item.fieldName === 'brand').initialValue, id);
    },
    // 清空下拉框表当控件的值和下拉列表
    clearFormItem(item) {
      item.initialValue = undefined;
      item.itemList = [];
    },
    // 所有用户
    async getAllUser() {
      const res = await getAllUser();
      let data = arrayObjDeWeight(res.data, 'userId'); // 人员去重(解决前端报错)
      this.topFilterList.find(item => item.fieldName === 'serviceAdvisor').itemList = data.map(x => ({ value: x.userId + '', text: x.employeeName }));
      this.topFilterList.find(item => item.fieldName === 'trancer').itemList = data.map(x => ({ value: x.userId + '', text: x.employeeName }));

      this.columns.find(x => x.dataIndex === 'SERVICE_ADVISOR').filterItems = this.columns.find(item => item.dataIndex === 'SERVICE_ADVISOR').editItems = data.map(x => ({
        value: x.userId + '',
        text: x.employeeName
      }));
      this.columns.find(x => x.dataIndex === 'TRANCER').filterItems = this.columns.find(item => item.dataIndex === 'TRANCER').editItems = data.map(x => ({
        value: x.userId + '',
        text: x.employeeName
      }));
    },
    async repairType() {
      const res = await findAllRepairType();
      this.topFilterList.find(item => item.fieldName === 'roType').itemList = res.data.map(x => ({ value: x.REPAIR_TYPE_CODE + '', text: x.REPAIR_TYPE_NAME }));
    },
    // 查询条件触发方法
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { offset: 0, xhrAbort: false });
    },
    // 导出
    exportData() {
      this.exportLoading = true;
      exportTrustDeedVisitScan(this.fetchParams).then(res => {
        exportExcelFile(res, '委托单回访一览报表');
      });
      this.exportLoading = false;
    }
  }
};
</script>
